<template>
    <el-card class="search-box-card" :style="style" shadow="never">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="类型" :label-width="searchFormWidth">
                        <el-select
                            class="form-item-class"
                            clearable
                            v-model="form.typeId"
                            placeholder="选择类型"
                        >
                            <el-option
                                v-for="item in types"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="searchFormWidth">
                        <el-select
                            class="form-item-class"
                            clearable
                            v-model="form.statusId"
                            placeholder="全部"
                        >
                            <el-option
                            v-for="item in status"
                                key="online"
                                :label="item.info"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="标题" :label-width="searchFormWidth">
                        <el-input
                            class="form-item-class"
                            v-model="form.title"
                            placeholder="请输入标题"
                        />
                    </el-form-item>
                    <el-form-item label="内容" :label-width="searchFormWidth">
                        <el-input
                            class="form-item-class"
                            v-model="form.text"
                            placeholder="请输入内容"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-button type="primary" @click="onReset"
                            >重置</el-button
                        >
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch"
                            >查询</el-button
                        >
                    </el-form-item>
                   
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { storeToRefs } from "pinia";
import { useContentStore } from "@/stores/content";
const contentStore = useContentStore();
const { fetchContents } = contentStore;
const { contentTypes } = storeToRefs(contentStore);
const form = ref({ type: "", title: "", text: "", status: "" });
const props = defineProps(["style","types","status"]);
const searchFormWidth = ref("auto");
function onSearch() {
    fetchContents({}, form.value);
}
function onReset() {
    form.value = { type: "", title: "", text: "", status: "" };
    fetchContents({}, form.value);
}
</script>
<style scoped>
.form-item-class {
    width: 100%;
}
.search-box-card {
    height: auto;
}
</style>
